<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-page-header :content="$route.meta.title" @back="$router.back()"/>
        </el-card>
        <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            :label-width="130"
        >
            <el-card class="!border-none mt-4" shadow="never">
                <el-form-item label="扬帆计划第几期" prop="num">
                    <div class="w-80">
                    <el-input
                        v-model="formData.num"
                        placeholder="请输入期数"
                        type="text"
                        maxlength="100"
                        clearable
                    />
                    </div>
                </el-form-item>
                <el-form-item label="本期嘉宾" prop="guest">
                    <div class="w-80">
                    <el-input
                        v-model="formData.guest"
                        placeholder="请输入本期嘉宾"
                        type="text"
                        maxlength="100"
                        clearable
                    />
                    </div>
                </el-form-item>
                <el-form-item label="活动标题" prop="title">
                    <div class="w-80">
                    <el-input
                        v-model="formData.title"
                        placeholder="请输入活动标题"
                        type="text"
                        maxlength="20"
                        show-word-limit
                        clearable
                    />
                    </div>
                </el-form-item>
                <el-form-item label="直播开始时间" prop="start_time">
                    <div class="w-80">
                    <div class="block">
                        <el-date-picker
                        class="w-80"
                        v-model="formData.start_time"
                        type="datetime"
                        placeholder="请选择直播开始时间"
                        format="YYYY-MM-DD HH:mm"
                        date-format="MMM DD, YYYY"
                        time-format="HH:mm"
                        value-format="X"
                        />
                    </div>
                    </div>
                </el-form-item>
                <el-form-item label="直播回放">
                    <div class="w-80">
                        <el-input
                            v-model="formData.playback"
                            placeholder="请输入直播回放"
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 6}"
                            maxlength="300"
                            show-word-limit
                            clearable
                        />
                        <div class="form-tips">请输入直播回放的链接网址，及密码等信息</div>
                    </div>
                </el-form-item>
                <el-form-item label="嘉宾账号" prop="user.real_name">
                    <div class="w-[380px]">
						<el-input
							v-model="formData.user.real_name"
							placeholder="请选择嘉宾"
							type="text"
							maxlength="30"
							show-word-limit
							clearable
							readonly
						>
							<template #append>
								<el-button @click="addUser">
									添加
									<icon name="el-icon-Plus"/>
								</el-button>
							</template>
						</el-input>
                        <div class="form-tips">嘉宾登录 app 的账号，填写后可将本期内容与嘉宾关联，在其主页显示</div>
					</div>
                    
                </el-form-item>
                <el-form-item label="封面图" prop="pics">
                    <div class="w-80">
                    <div>
                        <material-picker v-model="formData.pics" :limit="1"/>
                    </div>
                    <div class="form-tips">建议尺寸：655*286px</div>
                    </div>
                </el-form-item>
                <el-form-item label="嘉宾海报" prop="piclist">
                    <div class="w-[500px]">
                    <div>
                        <material-picker v-model="formData.piclist" :limit="9"/>
                    </div>
                    <div class="form-tips">建议尺寸：750*783px</div>
                    </div>
                </el-form-item>
                <el-form-item label="进群码">
                    <div class="w-80">
                    <div>
                        <material-picker v-model="formData.group_qrcode" :limit="1"/>
                    </div>
                    <div class="form-tips">建议尺寸：584*982px</div>
                    </div>
                </el-form-item>
                <el-form-item label="报名条件" prop="need_interests_id">
                    <div class="w-[500px]">
                        <el-checkbox
                            v-model="checkAll"
                            :indeterminate="isIndeterminate"
                            @change="handleCheckAllChange"
                        >
                            全部
                        </el-checkbox>
                        <el-checkbox-group
                            v-model="formData.need_interests_id"
                            @change="handleCheckedCitiesChange"
                        >
                            <el-checkbox v-for="item in options" :key="item.value" :label="item.value" :value="item.label">
                            {{ item.label }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
                <el-form-item label="直播回放条件" prop="need_back_interests_id">
                    <div class="w-[500px]">
                        <el-checkbox
                            v-model="checkBack"
                            :indeterminate="isIndeterminateBack"
                            @change="handleCheckBackChange"
                        >
                            全部
                        </el-checkbox>
                        <el-checkbox-group
                            v-model="formData.need_back_interests_id"
                            @change="handleCheckedBackChange"
                        >
                            <el-checkbox v-for="item in options" :key="item.value" :label="item.value" :value="item.label">
                            {{ item.label }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
                <el-form-item  label="课程介绍">
                    <editor v-model="formData.infos" :height="567" />
                </el-form-item>
            </el-card>
        </el-form>

        <footer-btns>
            <el-button @click="$router.back()">取消</el-button>
            <el-button type="primary" @click="handleSave" v-prevent-reclick="3000">保存</el-button>
        </footer-btns>

        <check_demand ref="checkDemand" @backAdmin="backAdmin"></check_demand>

    </div>
</template>

<script lang="ts" setup>
import type { CheckboxValueType, FormInstance } from 'element-plus'
import { liveInfo, saveLive } from '@/api/operation';
import check_demand from './check_demand.vue'
import useMultipleTabs from '@/hooks/useMultipleTabs'
import { number } from 'echarts';
const {removeTab} = useMultipleTabs()

const checkAll = ref(true)
const isIndeterminate = ref(false)
const checkBack = ref(true)
const isIndeterminateBack = ref(false)
// const checkedCities:any = ref([0,1,2,3])
// const props = { label: 'name', value: 'id', disabled: 'unable' }
const options = [
    {value: 0, label: '用户'},
    {value: 1, label: '白银会员'},
    {value: 2, label: '黄金会员'},
    {value: 3, label: '钻石会员'}
]
const handleCheckAllChange = (val: CheckboxValueType) => {
  formData.need_interests_id = val ? [0,1,2,3] : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: CheckboxValueType[]) => {
    console.log(value)
    const checkedCount = value.length
    checkAll.value = checkedCount === options.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < options.length
}
const handleCheckBackChange = (val: CheckboxValueType) => {
  formData.need_back_interests_id = val ? [0,1,2,3] : []
  isIndeterminateBack.value = false
}
const handleCheckedBackChange = (value: CheckboxValueType[]) => {
    console.log(value)
    const checkedCount = value.length
    checkBack.value = checkedCount === options.length
    isIndeterminateBack.value = checkedCount > 0 && checkedCount < options.length
}

const route = useRoute()
const router = useRouter()
const formRef = shallowRef<FormInstance>()
const formData:any = reactive({
    id: '',
    user: {
        id: '',
        real_name: ''
    },
    user_id: '',
    num: '',
    guest: '',
    title: '',
    start_time: '',
    playback: '',
    pics: '',
    infos: '',
    piclist: [],
    group_qrcode: '',
    need_interests_id: [0,1,2,3],
    need_back_interests_id: [0,1,2,3]
})
const rules = reactive({
    num: [{required: true, message: '请填写期数', trigger: 'blur'}],
    guest: [{required: true, message: '请填写嘉宾', trigger: 'blur'}],
    title: [{required: true, message: '请填写标题', trigger: 'blur'}],
    start_time: [{required: true, message: '请选择直播开始时间', trigger: 'blur'}],
    // 'user.real_name':  [{required: true, message: '请选择嘉宾', trigger: 'blur'}],
    pics: [{required: true, message: '请选择封面图', trigger: 'blur'}],
    piclist: [{required: true, message: '请选择嘉宾海报', trigger: 'blur'}],
    need_interests_id:  [{required: true, message: '请选择报名条件', trigger: 'blur'}],
    need_back_interests_id:  [{required: true, message: '请选择直播回放条件', trigger: 'blur'}],
})

const checkDemand = ref()
const addUser = () => {
    checkDemand.value.init();
}
// 选择用户返回
const backAdmin = (row: any)=> {
    console.log('backAdmin')
    console.log(row)
    formData.user.real_name = row.real_name;
    formData.user.id = row.user_id;
    formData.user_id = row.user_id;
    formRef.value?.clearValidate();
}

const getDetails = async () => {
  const data = await liveInfo({
    live_id: route.query.id,
  })
  Object.keys(formData).forEach((key) => {
    //@ts-ignore
    formData[key] = data[key]
  })
  let arr:any = []
  formData.need_interests_id.map((item:any) => {
    arr.push(Number(item))
  })
  formData.need_interests_id = arr;
  let arr_back:any = []
  formData.need_back_interests_id.map((item:any) => {
    arr_back.push(Number(item))
  })
  formData.need_back_interests_id = arr_back;
  console.log(formData)
}

const handleSave = async () => {
    await formRef.value?.validate()
    console.log(formData)
    if (formData.infos == "<p><br></p>") {
        formData.infos = ''
    }
    await saveLive(formData)
    removeTab()
    router.back()
}



route.query.id && getDetails()
</script>
<style scoped lang="scss">
::v-deep .el-tabs__nav-wrap{
  overflow-x: auto ;
  width: 86% ;
  margin-left: 10px ;
}
::v-deep .el-tabs__nav-wrap::after{
  display: none ;
}
::v-deep .el-input__wrapper{
  width: 300px;
}
</style>